function xqData() {
    let url = 'http://jx.xuzhixiang.top/ap/api/detail.php';
    let s = new URLSearchParams(location.search);
    let id = s.get("id")
    // console.log(id)
    axios.get(url, {
        params: {
            id
        }
    }).then(res => {
        var obj = res.data.data
        console.log(obj)
        // console.log(obj.pimg) 

        let oP = document.querySelectorAll("p")
        console.log(oP)
        let oPic = document.querySelectorAll(".zoomjm")
        // oP[0].innerHTML=obj.pname

        oP[0].innerHTML = obj.pname
        oPic[0].src = obj.pimg
        oPic[1].src = obj.pimg
        oPic[2].src = obj.pimg
        oPic[3].src = obj.pimg
        oPic[4].src = obj.pimg
        oPic[5].src = obj.pimg
        oPic[6].src = obj.pimg
        oP[2].innerText = "￥" + obj.pprice

        //添加商品到购物车
        // 获取文本框
        let oIput = document.querySelector(".xq_show_carshop2");
        // console.log(oIput);
        //获取 + - 号
        let oB = document.querySelectorAll(".num")
        // console.log(oB)
        let oSpan = document.querySelector("span");

        oB[0].onclick = function () {

            oIput.value--;
            if (oIput.value <= 0) {
                oIput.value = 1
            }
        }
        oB[1].onclick = function () {
            oIput.value++;
        }

        function addShop() {
            let oSpan = document.querySelector("span");
            console.log(oSpan)
            oSpan.onclick = function () {
                let url = "http://jx.xuzhixiang.top/ap/api/add-product.php"
                let uid = localStorage.getItem("uid");
                let p = new URLSearchParams(location.search);
                let pid = p.get("id")
                // console.log(pid);

                //    接口参数：
                //    uid  用户id
                //    pid  商品id
                //    pnum  要添加的商品数量
                axios.get(url, {
                    params: {
                        uid,
                        pid,
                        pnum: oIput.value
                    }
                }).then(data => {
                    // console.log(data);
                    location.href = "shopCar.html"   

                })

            }

        }
        addShop()
    })
}
xqData();

class Zoom {
    constructor() {
        this.zoomBOX = document.getElementById("zoomBox");
        this.midArea = document.getElementById("midArea");
       
        this.midImg = this.midArea.children[0];
        this.zoom = document.getElementById("zoom");
        this.bigBox = document.getElementById("bigBox");
        this.bigImg = this.bigBox.children[0];
        this.slt = document.getElementById("slt");
        this.smallImg = this.slt.children;
        this.init();
    }

    //初始化(init)时，鼠标移入时下显示放大镜和bigBox，鼠标移除时隐藏放大镜和bigBox;
    init() {
        this.midArea.onmouseover = () => {
            this.zoom.style.display = "block";
            this.bigBox.style.display = "block";

        }
        this.midArea.onmouseout = () => {
            this.zoom.style.display = "none";
            this.bigBox.style.display = "none";

        }
        this.midArea.onmousemove = (e) => {
            let evt = e || window.event;
            let x = evt.pageX - this.zoomBOX.offsetLeft - this.zoom.offsetWidth / 2;
            let y = evt.pageY - this.zoomBOX.offsetTop- this.zoom.offsetHeight / 2;

            let mx = this.midArea.offsetWidth - this.zoom.offsetWidth;
            let my = this.midArea.offsetHeight - this.zoom.offsetHeight;

            x = x <= 0 ? 0 : x >= mx ? mx : x;
            y = y <= 0 ? 0 : y >= my ? my : y;

            this.zoom.style.left=x+"px";
            this.zoom.style.top=y+"px";

            this.bigImg.style.left = -this.zoom.offsetLeft * (this.bigImg.offsetWidth / this.midArea.offsetWidth) + "px";
            this.bigImg.style.top = -this.zoom.offsetTop * (this.bigImg.offsetHeight / this.midArea.offsetHeight) + "px";


        }
        for (let i = 0; i < this.smallImg.length; i++) {
            this.smallImg[i].onclick = () => {
                this.midImg.src = this.smallImg[i].src;
                this.bigImg.src = this.smallImg[i].src;
            }
        }
    }
}

